<template>
    <div class="content">
      <div style="font-size:14px;font-weight:600;margin-bottom:10px;margin-top:-5px;">告警管理</div>
      <div style="font-size:12px;">
          <el-form :inline="true" :model="form" >
            <el-form-item>
              <el-input clearable class="input-border-style" v-model="form.appname" placeholder="主机名称" />
            </el-form-item>
            <el-form-item>
              <el-button @click="getData">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <el-table :data="dataList" style="width: 100%;font-size:12px;">
        <el-table-column prop="appname" label="主机名称" width="180" header-align="center" align="center"/>
        <el-table-column prop="outerIp" label="外网IP" width="180" header-align="center" align="center"/>
        <el-table-column prop="innerIp" label="内网IP" header-align="center" align="center"/>
        <el-table-column prop="event" label="备注" header-align="center" align="center"/>
        <el-table-column prop="createDate" label="告警时间" header-align="center" align="center"/>
        <el-table-column prop="status" label="状态" header-align="center" align="center">
          <template #default="scope">
            <status-error  v-if="scope.row.status==1">未处理</status-error>
            <status-success  v-if="scope.row.status==2">已处理</status-success>
          </template>
        </el-table-column>
        <el-table-column label="操作" header-align="center" align="center">
          <template #default="scope">
            <el-button link @click="handle(item)" :disabled="scope.row.status!=1">处理</el-button>
          </template>
        </el-table-column>
      </el-table>
        <div style="float:right;margin-top:10px;">
            <el-pagination
                size="small"
                background
                layout="prev, pager, next"
                :total="total"
                @size-change="sizeChange"
                @current-change="changePage"
                >
            </el-pagination>
        </div>
        <!-- <el-dialog
            title="警告处理"
            v-model="warnVisible"
            width="40%"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            >
            <div>
                <el-form ref="warnObj" :model="warnObj" label-width="80px" size="small" :rules="rules">
                    <el-form-item label="主机名">
                        <el-input v-model="warnObj.appname" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="内网IP">
                        <el-input v-model="warnObj.innerIp" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="外网IP">
                        <el-input v-model="warnObj.outerIp" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="警告事件">
                        <el-input type="textarea" v-model="warnObj.event" rows="5" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="处理情况">
                        <el-radio-group v-model="warnObj.status">
                            <el-radio label="1">未处理</el-radio>
                            <el-radio label="2">已处理</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="warnVisible = false">取 消</el-button>
                <el-button size="small" type="primary" @click="submit('warnObj')">确 定</el-button>
            </span>
        </el-dialog> -->
    </div>
  </template>
  <script>
import http from '../utils/request'
import StatusSuccess from './components/status-success.vue'
import StatusError from './components/status-error.vue'
  export default {
    components:{
      StatusSuccess,
      StatusError
    },
    data() {
        return {
          dataList:[],
          form:{
            appname:''
          },
          total:0,
          page:1,
          pageSize:10,
          warnVisible:false,
          options:[
            {
                label:'未处理',
                value:'1'
            },
            {
                label:'已处理',
                value:'2'
            }
          ],
          warnObj:{},
          rules:{
                status: [
                    { required: true, message: '请选择活动区域', trigger: 'change' }
                ],
            }
        }
      },
      mounted(){
        this.getData();
      },
      methods:{
        detail(obj){
          this.srjb = obj;
          // console.log(obj)
          this.dialogVisible = true;
        },
        sizeChange(pagesize){
          // console.log(pagesize)
        },
        changePage(page){
          this.page = page;
          this.getData();
        },
        getData(){
            // console.log(this.form)
          var that = this;
          var param = this.form;
          param.page = this.page;

          http.get(window.SITE_CONFIG['apiURL']+'/api/warn/page',{params:param})
            .then(({ data: res }) => {
                if (res.code !== 0) {
                    return this.$message.error(res.msg)
                }
                this.dataList = res.data.list;
                this.total = res.data.total;
            }).catch(() => {})
        },
        handle(warnObj){
            // console.log(warnObj)
            this.warnVisible = true;
            this.warnObj = warnObj;
            this.warnObj.status = this.warnObj.status+''
        },
        submit(formName){
            this.$refs[formName].validate((valid) => {
                if (!valid) {
                    return false;
                } else {
                    // console.log(this.warnObj)
                    this.warnObj.status = parseInt(this.warnObj.status);
                    http.post(window.SITE_CONFIG['apiURL']+'/api/warn/update',this.warnObj)
                    .then(({ data: res }) => {
                        if (res.code !== 0) {
                            return this.$message.error(res.msg)
                        }
                        this.getData();
                        this.warnVisible = false;
                    }).catch(() => {})
                }
            });
        }
      }
  }
  </script>
  <style scoped>

  
  
  </style>